<template>
    <div class="wifi-container">
        <div class="wifi-content">
            <!-- WiFi Logo -->
            <img src="/images/mine/wifi-logo.png" alt="WiFi Logo" class="wifi-logo">

            <!-- 提示文本 -->
            <p class="tip-text">用电脑浏览器打开网址，请确保手机和电脑<br>在同一局域网内，传输过程请勿关闭页面</p>

            <!-- 地址显示 -->
            <div class="address-box">
                <span class="address">{{ localAddress }}</span>
            </div>

            <!-- 按钮组 -->
            <div class="button-group">
                <van-button type="primary" block class="copy-btn" @click="handleCopy">
                    复制地址
                </van-button>
                <van-button block class="finish-btn" @click="handleFinish">
                    完成上传
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { showToast } from 'vant'
    import emitter from '@/utils/eventBus'
    const router = useRouter()
    const localAddress = ref('')
    const linkToken = ref('')
    // 获取本地IP地址和端口
    const getLocalAddress = () => {
        // 这里应该根据实际部署环境设置正确的地址和端口
        // 示例：如果在本地开发环境
        if (history.state.params) {
            linkToken.value = history.state.params.token
        }
        let baseUrl = window.location.origin
        const host = baseUrl + '/#/profile/resume/wifi-upload'
        localAddress.value = `${host}?token=${linkToken.value}`
    }

    // 复制地址
    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(localAddress.value)
            showToast('地址已复制')
        } catch (err) {
            // 降级处理：创建临时输入框来复制
            const input = document.createElement('input')
            input.value = localAddress.value
            document.body.appendChild(input)
            input.select()
            document.execCommand('copy')
            document.body.removeChild(input)
            showToast('地址已复制')
        }
    }

    // 完成上传
    const handleFinish = () => {
        router.back()
    }

    onMounted(() => {
        getLocalAddress()
    })
</script>

<style lang="scss" scoped>
    .wifi-container {
        min-height: 100vh;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;

        .wifi-content {
            width: 100%;
            max-width: 375px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            .wifi-logo {
                width: 114px;
                margin-bottom: 40px;
            }

            .tip-text {
                font-size: 16px;
                color: #333;
                line-height: 1.5;
                margin-bottom: 40px;
            }

            .address-box {
                width: 100%;
                padding: 16px;
                background: #f5f6f7;
                border-radius: 8px;
                margin-bottom: 40px;

                .address {
                    font-size: 18px;
                    color: #333;
                    word-break: break-all;
                }
            }

            .button-group {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 16px;

                .van-button {
                    height: 44px;
                    border-radius: 10px;
                    font-size: 16px;

                    &.copy-btn {
                        background: #165dff;
                        border: none;
                    }

                    &.finish-btn {
                        background: #f2f3f5;
                        color: #1d2129;
                        border: none;
                    }
                }
            }
        }
    }
</style>